<template>
  <div class="container">
    <div class="form">
      <div class="item">
        <div class="label">手机</div>
        <input type="number"
               placeholder="请输入"
               :disabled="is_consultant==0"
               class="inp"
               maxlength="11"
               @focus="rewrite()"
               @input="check_service()"
               v-model="user_tel">
      </div>
      <div class="tip">
        输入服务商后，以下信息会自动匹配。
      </div>
      <div class="item">
        <div class="label">姓名</div>
        <input type="text"
               class="inp"
               disabled
               v-model="user_name">
      </div>
      <div class="item">
        <div class="label">级别</div>
        <input type="text"
               class="inp"
               disabled
               v-model="user_level">
      </div>
    </div>
    <div class="sub-btn"
         @click="rewrite()"
         v-if="is_consultant==1&&!isSet">
      修改
    </div>
    <button class="sub-btn"
            :class="{'disabled':user_tel.length<11||user_name==''||user_level==''}"
            @click="save()"
            v-if="isSet">
      保存
    </button>
  </div>
</template>
<script>
import common from '@/assets/js/mmk_common.js'
export default {
  data () {
    return {
      user_tel: "",
      isSet: false,
      user_name: "",
      user_level: "",
      is_consultant: 0 //是否能修改上级  0否 1是
    };
  },
  methods: {
    save () {
      let that = this
      if (this.user_tel == "") {
        wx.showToast({
          title: "服务商手机号不能为空", //提示的内容,
          icon: "none", //图标,
          duration: 2000, //延迟时间,
          mask: false //显示透明蒙层，防止触摸穿透,
        });
        return false;
      } else if (this.user_tel.length < 11) {
        wx.showToast({
          title: "服务商手机号格式不正确", //提示的内容,
          icon: "none", //图标,
          duration: 2000, //延迟时间,
          mask: false //显示透明蒙层，防止触摸穿透,
        });
        return false;
      } else if (this.user_name == '' || this.user_level == '') {
        wx.showToast({
          title: "该服务商不存在", //提示的内容,
          icon: "none", //图标,
          duration: 2000, //延迟时间,
          mask: false //显示透明蒙层，防止触摸穿透,
        });
      } else {
        wx.showLoading({
          title: "加载中", //提示的内容,
          mask: true //显示透明蒙层，防止触摸穿透,
        });
        common.fly_post("api/v4_2/set_server", {
          server_username: this.user_tel
        }, result => {
          wx.hideLoading();
          let res = result.data;
          if (res.status_code == 0) {
            wx.showToast({
              title: "修改成功", //提示的内容,
              icon: "success", //图标,
              duration: 1500, //延迟时间,
              mask: false, //显示透明蒙层，防止触摸穿透,
              success () {
                setTimeout(() => {
                  that.get_service()
                }, 1500);
              }
            });

          } else {
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
          }
        })
      }
    },
    get_data () {
      if (this.user_tel == "") {
        wx.showToast({
          title: "服务商手机号不能为空", //提示的内容,
          icon: "none", //图标,
          duration: 2000, //延迟时间,
          mask: false //显示透明蒙层，防止触摸穿透,
        });
        return false;
      } else {
        wx.showLoading({
          title: "加载中", //提示的内容,
          mask: true //显示透明蒙层，防止触摸穿透,
        });
        common.fly_post("api/v4_2/server_detail", {
          server_username: this.user_tel
        }, result => {
          wx.hideLoading();
          let res = result.data;
          if (res.status_code == 0) {
            this.user_name = res.data.server_name;
            this.user_level = res.data.server_role_name;
          } else {
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: false
            });
          }
        })
      }
    },
    check_service () {
      let that = this;
      if (this.user_tel.length >= 11) {
        this.get_data()
      }
    },
    get_service () {
      let that = this
      wx.showLoading({
        title: "加载中", //提示的内容,
        mask: true //显示透明蒙层，防止触摸穿透
      });
      common.fly_post("api/v4_2/my_info_detail", {}, result => {
        let res = result.data;
        wx.hideLoading();
        if (res.status_code == 0) {
          wx.setStorageSync("user_data", res.data);
          that.user_data = res.data;
          that.user_tel = res.data.referee_phone;
          that.is_consultant = res.data.is_consultant;
          if (that.is_consultant != 1) {
            that.isSet = false
          }
          that.user_name = res.data.referee_realname;
          that.user_level = res.data.referee_rolename;
          that.$forceUpdate()
        } else {
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: true
          });
        }
      });

    },
    rewrite () {
      this.isSet = true
      this.user_name = ""
      this.user_level = ""
      this.user_tel = ""
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: "我的推荐人"
    });
    Object.assign(this.$data, this.$options.data());
  },
  onShow () {
    this.get_service();
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  box-sizing: border-box;
  .form {
    width: 100%;
    min-height: 44px;
    .item {
      background-color: #fff;
      height: 44px;
      line-height: 44px;
      display: flex;
      padding-left: 15px;
      .label {
        font-size: 14px;
        font-family: "Regular";
        color: rgba(102, 102, 102, 1);
      }
      .inp {
        display: block;
        height: 100%;
        line-height: 44px;
        font-size: 14px;
        padding-left: 10px;
        flex: 1;
      }
    }
    .tip {
      line-height: 38px;
      font-size: 12px;
      font-family: "Medium";
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      padding-left: 14px;
    }
  }
  .sub-btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: rgba(255, 56, 62, 1);
    font-size: 17px;
    font-family: "Regular";
    color: rgba(255, 255, 255, 1);
    position: absolute;
    bottom: 0px;
    outline: none;
    border: none;
    border-radius: 0;
    &.disabled {
      background-color: rgba(200, 200, 200, 1);
    }
  }
}
</style>


